<template>
  <div>
    <div class="g-card">
      <el-steps :active="currentActive" align-center finish-status="success">
        <el-step title="基础信息"></el-step>
        <el-step title="活码员工"></el-step>
        <el-step title="欢迎语"></el-step>
      </el-steps>
    </div>
    <div class="g-card" v-if="currentActive === 1">
      <el-row>
        <el-col :span="10">
          <el-form ref="baseForm" :rules="baseRules" :model="baseForm" label-position="right" label-width="100px">
            <el-form-item label="活码名称" prop="qrName">
              <el-input v-model="baseForm.qrName" maxlength="15" show-word-limit clearable></el-input>
              <!-- <div class="sub-des">活码名称创建完成后不可修改</div> -->
            </el-form-item>
            <el-form-item label="活码分组" prop="qrGroupId">
              <el-select v-model="baseForm.qrGroupId">
                <el-option
                  v-for="item in codeCategoryList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="自动通过好友">
              <el-switch v-model="baseForm.qrAutoAdd" :active-value="1" :inactive-value="0"></el-switch>
              <div class="sub-des">开启后，客户添加该企业微信时，无需好友验证，将会自动添加成功</div>
            </el-form-item>
            <el-form-item label="新客户标签">
              <template v-for="(item, index) in baseForm.weEmpleCodeTags">
                <el-tag v-if="item.tagName" size="medium" :key="index">{{ item.tagName }}</el-tag>
              </template>
              <div>
                <el-button size="mini" type="primary" icon="el-icon-plus" @click="selectedFn">
                  {{ baseForm.weEmpleCodeTags.length == 0 ? '添加' : '编辑' }}标签
                </el-button>
              </div>
              <div class="sub-des">添加成功后，该客户将会自动设置以上选择标签</div>
            </el-form-item>
            <el-form-item>
              <el-button plain @click="cancelFn">取消</el-button>
              <el-button type="primary" @click="nextStep(2)">下一步</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <div class="g-card" v-if="currentActive === 2">
      <el-row>
        <el-col :span="15">
          <el-form ref="codeForm" :rules="codeRules" :model="codeForm" label-position="right" label-width="100px">
            <el-form-item label="活码类型" prop="qrType">
              <el-radio-group v-model="codeForm.qrType" @change="changeType">
                <el-radio :label="1">单人</el-radio>
                <el-radio :label="2">多人</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="排班类型" prop="qrRuleType">
              <el-radio-group v-model="codeForm.qrRuleType">
                <el-radio :label="1">全天在线</el-radio>
                <el-radio :label="2" :disabled="codeForm.qrType === 1">自动排班</el-radio>
              </el-radio-group>
              <div class="sub-des">
                <span v-if="codeForm.qrRuleType == 1">多人全天在线时随机分配，单人活码不支持排班</span>
                <span v-else-if="codeForm.qrRuleType == 2">
                  选择自动排班时，默认生成一条全天在线规则，不可删除，保证有员工全天在线
                </span>
              </div>
            </el-form-item>
            <el-form-item label="活码员工" prop="weEmpleCodeUseScops" v-if="codeForm.qrRuleType == 1">
              <div v-if="codeForm.weEmpleCodeUseScops.length > 0">
                <el-tag size="medium" v-for="(item, index) in codeForm.weEmpleCodeUseScops" :key="index">
                  {{ item.businessName }}
                </el-tag>
              </div>
              <el-button type="primary" plain size="mini" @click="onSelectUser">
                {{ codeForm.weEmpleCodeUseScops.length ? '修改' : '选择' }}员工
              </el-button>
              <div class="sub-des">单人活码只能选择一个员工，多人活码支持选择多个员工</div>
            </el-form-item>
            <el-form-item v-if="codeForm.qrRuleType == 2" label="活码排班" prop="empleCodeRosterDto">
              <template v-for="(item, index) in codeForm.empleCodeRosterDto">
                <el-card class="box-card roster-card" :key="item.id">
                  <div style="display: flex; justify-content: flex-end">
                    <el-button v-if="index !== 0" type="text" icon="el-icon-delete" @click="onRemoveRoster(index)">
                      删除
                    </el-button>
                  </div>
                  <el-form-item label="排班员工">
                    <el-tag size="medium" v-for="(tag, key) in item.weEmpleCodeUseScops" :key="key">
                      {{ tag.businessName }}
                    </el-tag>
                    <el-button style="margin-left: 10px" size="mini" type="primary" plain @click="onSelectUser(index)">
                      {{ item.weEmpleCodeUseScops.length ? '修改' : '选择' }}员工
                    </el-button>
                  </el-form-item>
                  <el-form-item label="工作周期">
                    <el-checkbox-group v-model="item.weekday" @change="checkStartEnd($event, index)">
                      <el-checkbox :label="1" :disabled="index === 0">周一</el-checkbox>
                      <el-checkbox :label="2" :disabled="index === 0">周二</el-checkbox>
                      <el-checkbox :label="3" :disabled="index === 0">周三</el-checkbox>
                      <el-checkbox :label="4" :disabled="index === 0">周四</el-checkbox>
                      <el-checkbox :label="5" :disabled="index === 0">周五</el-checkbox>
                      <el-checkbox :label="6" :disabled="index === 0">周六</el-checkbox>
                      <el-checkbox :label="7" :disabled="index === 0">周日</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                  <el-form-item label="在线时间">
                    <el-time-select
                      v-model="item.startDate"
                      :disabled="index === 0"
                      :picker-options="{
                        start: '00:00',
                        end: '23:59',
                        step: '00:30',
                      }"
                      :end="item.endDate"
                      @change="checkStartEnd($event, index)"
                      placeholder="任意时间点"></el-time-select>
                    <el-time-select
                      :picker-options="{
                        start: '00:00',
                        end: '23:59',
                        step: '00:30',
                      }"
                      :start="item.startDate"
                      @change="checkStartEnd($event, index)"
                      v-model="item.endDate"
                      :disabled="index === 0"
                      placeholder="任意时间点"></el-time-select>
                  </el-form-item>
                </el-card>
              </template>
              <div class="mt20">
                <el-button size="mini" type="primary" plain @click="onAddRoster">添加工作周期</el-button>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button @click="currentActive = 1">上一步</el-button>
              <el-button type="primary" @click="nextStep(3)">下一步</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <div v-if="currentActive === 3">
      <!-- <welcome-content v-loading="loading" :showBack="true" @update="currentActive = 2" :baseData="materialData" @submit="getWelData"></welcome-content> -->
      <AddMaterial
        :moduleType="4"
        :otherType="1"
        @update="currentActive = 2"
        @submit="getWelData"
        :baseData="materialData"
        :showModle="true"></AddMaterial>
    </div>

    <!-- 选择标签弹窗 -->
    <SelectTag
      :visible.sync="dialogVisibleSelectTag"
      :defaultValues="selectedTagList"
      @success="submitSelectTag"></SelectTag>

    <!-- 选择使用员工弹窗 -->
    <SelectUser
      :key="codeForm.qrType"
      :defaultValues="selectedUserList"
      :visible.sync="dialogVisibleSelectUser"
      title="选择使用员工"
      :isOnlyLeaf="true"
      :isSigleSelect="codeForm.qrType == 1"
      @success="selectedUser"></SelectUser>
  </div>
</template>

<script>
import { getDetail, add, update, getCodeCategoryList } from '@/api/drainageCode/staff'
import PhoneDialog from '@/components/PhoneDialog'
import SelectUser from '@/components/SelectWeUser'
import SelectTag from '@/components/SelectTag'
import SelectMaterial from '@/components/SelectMaterial'
import WelcomeContent from '@/components/WelcomeContent.vue'
import AddMaterial from '@/components/ContentCenter/AddMaterial'

export default {
  components: {
    PhoneDialog,
    SelectTag,
    SelectUser,
    SelectMaterial,
    WelcomeContent,
    AddMaterial,
  },
  data() {
    return {
      operationIndex: null,
      formTemp: {}, // 编辑基础数据
      materialData: {
        templateInfo: '',
        materialMsgList: [],
      },
      title: '新建',
      currentActive: 1,
      baseForm: {
        qrName: '',
        qrGroupId: '',
        qrAutoAdd: 1, // 自动通过
        weEmpleCodeTags: [], // 标签
      },
      baseRules: {
        qrName: [
          {
            required: true,
            message: '请输入活码名称',
            trigger: 'blur',
          },
        ],
        qrGroupId: [
          {
            required: true,
            message: '请选择分组',
            trigger: 'blur',
          },
        ],
      },
      codeForm: {
        qrType: 1,
        qrRuleType: 1,
        weEmpleCodeUseScops: [],
        empleCodeRosterDto: [
          {
            type: 0,
            weEmpleCodeUseScops: [], // 员工
            weekday: [1, 2, 3, 4, 5, 6, 7], // 周期
            qrRuleType: 2,
            startDate: '00:00', // 开始时间
            endDate: '23:59', // 结束时间
          },
        ],
      },
      codeRules: {
        qrType: [
          {
            required: true,
            message: '请选择',
            trigger: 'blur',
          },
        ],
        qrRuleType: [
          {
            required: true,
            message: '请选择',
            trigger: 'blur',
          },
        ],
        weEmpleCodeUseScops: [
          {
            required: true,
            message: '请选择',
            trigger: 'blur',
            validator: (rule, value, callback) => {
              if (value.length == 0) {
                callback(new Error('请选择'))
              } else {
                callback()
              }
            },
          },
        ],
      },
      isInsertClientName: true,
      dialogVisibleSelectUser: false,
      dialogVisibleSelectTag: false,
      dialogVisibleSelectMaterial: false,
      dialogVisibleSelectWel: false,
      loading: false,
      codeCategoryList: [], // 活码分组
      selectedUserList: [], // 需要回显的选中员工
      selectedTagList: [],
      timeConflict: false,
    }
  },
  created() {
    let id = this.$route.query.id
    let groupId = this.$route.query.groupId
    if (groupId) {
      this.baseForm.qrGroupId = groupId
    }
    this.getCodeCategoryList()
    if (id) {
      this.title = '编辑'
      this.getDetailFn(id)
    }
  },
  methods: {
    checkStartEnd(e, index) {
      this.timeConflict = false
      this.operationIndex = index
      let goto = this.allTimeConflict() // 默认全天员工冲突
      // let timeGo = true // 非默认周期时间冲突
      if (goto) {
        // if (this.operationIndex > 0) {
        if (
          this.codeForm.empleCodeRosterDto[this.operationIndex].weekday.length &&
          (this.codeForm.empleCodeRosterDto[this.operationIndex].endDate ||
            this.codeForm.empleCodeRosterDto[this.operationIndex].startDate)
        ) {
          this.someTimeConflict()
        }
        // }
      }
    },
    someTimeConflict() {
      let conflictUserItem = [] // 存在冲突的当前数据
      let userList = [] // 当前重复人员
      let passList = [] // 当前之前的人员 不包含默认的第一条

      let current = this.codeForm.empleCodeRosterDto[this.operationIndex].weEmpleCodeUseScops.map((i) => {
        return { userId: i.businessId, name: i.businessName }
      })
      this.codeForm.empleCodeRosterDto.forEach((data, key) => {
        data.weEmpleCodeUseScops.map((i, index) => {
          if (key != this.operationIndex) {
            passList.push({
              userId: i.businessId,
              name: i.businessName,
              index: key,
              week: [],
              goto1: true,
              goto2: true,
            })
          }
        })
      })
      current.map((dd) => {
        passList.map((ff) => {
          if (dd.userId === ff.userId) {
            userList.push(ff)
          }
        })
      })
      // 重复人员下的时间校验
      let repeatWeek = []
      let currentWeekday = this.codeForm.empleCodeRosterDto[this.operationIndex].weekday
      userList.forEach((user) => {
        const arr = this.codeForm.empleCodeRosterDto[user.index].weekday
        for (var i = 0; i < arr.length; i++) {
          if (currentWeekday.indexOf(arr[i]) != -1) {
            user.week.push(arr[i])
          }
        }
      })
      userList.forEach((ddd) => {
        if (ddd.week.length) {
          let start = this.codeForm.empleCodeRosterDto[ddd.index].startDate
          let end = this.codeForm.empleCodeRosterDto[ddd.index].endDate
          if (start && end) {
            if (this.codeForm.empleCodeRosterDto[this.operationIndex].startDate) {
              ddd.goto1 = this.checkAuditTime(
                start,
                end,
                this.codeForm.empleCodeRosterDto[this.operationIndex].startDate,
              )
            }
            if (this.codeForm.empleCodeRosterDto[this.operationIndex].endDate) {
              ddd.goto2 = this.checkAuditTime(start, end, this.codeForm.empleCodeRosterDto[this.operationIndex].endDate)
            }
          }
        }
      })
      let str = ''
      userList.forEach((fdfd) => {
        if (!fdfd.goto1 || !fdfd.goto2) {
          let ss = fdfd.week.map((data) => {
            return data === 7 ? '日' : data
          })
          str += '员工' + fdfd.name + '在周' + ss.join('、') + '时间存在冲突;'
        }
      })
      if (str) {
        this.timeConflict = true
        this.msgError(str)
      } else {
        this.timeConflict = false
      }
    },
    allTimeConflict() {
      if (this.operationIndex === 0) {
        return true
      }
      let current = this.codeForm.empleCodeRosterDto[this.operationIndex].weEmpleCodeUseScops.map((i) => {
        return { userId: i.businessId, name: i.businessName }
      })
      let first = this.codeForm.empleCodeRosterDto[0].weEmpleCodeUseScops.map((i) => {
        return { userId: i.businessId, name: i.businessName }
      })
      let result = []
      current.map((dd) => {
        first.map((ff) => {
          if (dd.userId === ff.userId) {
            result.push(dd)
          }
        })
      })
      if (result.length) {
        let str = result
          .map((obj, index) => {
            return obj.name
          })
          .join(',')
        this.msgError('员工 ' + str + ' 已是全天在线，时间存在冲突！')
        this.timeConflict = true
        return false
      } else {
        this.timeConflict = false
        return true
      }
    },
    checkAuditTime(beginTime, endTime, current) {
      let strb = beginTime.split(':')
      if (strb.length != 2) {
        return false
      }
      let stre = endTime.split(':')
      if (stre.length != 2) {
        return false
      }
      let cur = current.split(':')
      if (cur.length != 2) {
        return false
      }
      let b = new Date()
      let e = new Date()
      let n = new Date()
      b.setHours(strb[0])
      b.setMinutes(strb[1])
      e.setHours(stre[0])
      e.setMinutes(stre[1])
      n.setHours(cur[0])
      n.setMinutes(cur[1])
      if (n.getTime() - b.getTime() >= 0 && n.getTime() - e.getTime() <= 0) {
        return false
      } else {
        return true
      }
    },
    cancelFn() {
      this.$router.back()
    },
    getWelData(data) {
      this.submit(data)
    },
    changeType(e) {
      if (e === 1) {
        this.codeForm.qrRuleType = 1
      }
    },
    nextStep(nextStep) {
      let form = ''
      if (nextStep == 2) {
        form = 'baseForm'
      } else if (nextStep == 3) {
        form = 'codeForm'
      }
      this.$refs[form].validate((validate) => {
        if (validate) {
          if (nextStep === 3) {
            if (this.codeForm.qrRuleType === 2) {
              let go = true
              let week = true
              let time = true
              this.codeForm.empleCodeRosterDto.forEach((ddd) => {
                if (!ddd.weEmpleCodeUseScops.length) {
                  go = false
                }
                if (!ddd.weekday.length) {
                  week = false
                }
                if (!ddd.startDate || !ddd.endDate) {
                  time = false
                }
              })
              if (go) {
                if (week) {
                  if (time) {
                    if (this.timeConflict) {
                      this.msgError('排班存在冲突！')
                    } else {
                      this.currentActive = nextStep
                    }
                  } else {
                    this.msgError('请选择活码排班每项的在线时间！')
                  }
                } else {
                  this.msgError('活码排班每项工作周期至少勾选一项！')
                }
              } else {
                this.msgError('活码排班每项至少选择一名员工！')
              }
            } else {
              this.currentActive = nextStep
            }
          } else {
            this.currentActive = nextStep
          }
        }
      })
    },
    /** 获取详情 */
    getDetailFn(id) {
      getDetail(id).then((res) => {
        this.formTemp = res.data
        let base = JSON.parse(JSON.stringify(res.data))
        this.baseForm = {
          qrName: base.name,
          qrGroupId: base.groupId,
          qrAutoAdd: base.autoAdd, // 自动通过
          weEmpleCodeTags: base.qrTags, // 标签
        }
        this.codeForm.qrType = base.type
        this.codeForm.qrRuleType = base.ruleType
        if (base.ruleType === 1) {
          let arr = []
          base.qrUserInfos[0].weQrUserList.forEach((dd) => {
            let obj = {
              scopeId: base.qrUserInfos[0].scopeId,
              businessId: dd.userId,
              businessName: dd.userName,
            }
            arr.push(obj)
          })
          this.codeForm.weEmpleCodeUseScops = arr
        } else {
          let arr = []
          base.qrUserInfos.forEach((dd) => {
            let obj = {
              type: dd.type,
              startDate: dd.beginTime,
              endDate: dd.endTime,
              weekday: dd.workCycle ? dd.workCycle.split(',').map((i) => parseInt(i, 0)) : [],
              scopeId: dd.scopeId,
              weEmpleCodeUseScops: dd.weQrUserList.map((ff) => {
                return { businessId: ff.userId, businessName: ff.userName }
              }),
            }
            arr.push(obj)
          })
          this.codeForm.empleCodeRosterDto = arr
        }
        this.materialData = {
          templateInfo: base.qrAttachments ? base.qrAttachments[0].content : '',
          attachments: base.qrAttachments ? this.setEditList(base.qrAttachments) : [],
        }
        // this.materialData.materialMsgList.forEach(ddd => {
        //   ddd.msgType = Number(ddd.msgType)
        // })
      })
    },
    setEditList(list) {
      let arr = []
      if (list && list.length) {
        list.forEach((dd) => {
          if (dd.realType === 0) {
            let obj = {
              id: dd.materialId,
              mediaType: '0',
              materialUrl: dd.picUrl,
            }
            arr.push(obj)
          } else if (dd.realType === 2) {
            let obj = {
              id: dd.materialId,
              mediaType: '2',
              materialUrl: dd.fileUrl,
              coverUrl: dd.picUrl,
              digest: dd.description,
              materialName: dd.title,
            }
            arr.push(obj)
          } else if (dd.realType === 3) {
            let obj = {
              id: dd.materialId,
              mediaType: '3',
              materialUrl: dd.fileUrl,
              digest: dd.description,
              materialName: dd.title,
            }
            arr.push(obj)
          } else if (dd.realType === 4) {
            let obj = {
              id: dd.materialId,
              mediaType: '4',
              content: dd.content,
            }
            arr.push(obj)
          } else if (dd.realType === 9) {
            let obj = {
              id: dd.materialId,
              mediaType: '9',
              content: dd.content,
              coverUrl: dd.picUrl,
              materialUrl: dd.linkUrl,
              materialName: dd.title,
            }
            arr.push(obj)
          } else if (dd.realType === 8) {
            let ob = {
              id: dd.materialId,
              mediaType: '8',
              materialName: dd.title,
              materialUrl: dd.linkUrl,
              materialName: dd.title,
            }
            arr.push(ob)
          } else if (dd.realType === 11) {
            let ff = {
              id: dd.materialId,
              mediaType: '11',
              digest: dd.appId,
              materialName: dd.title,
              coverUrl: dd.picUrl,
              materialUrl: dd.fileUrl,
            }
            arr.push(ff)
          } else if (dd.realType === 12) {
            let ff = {
              id: dd.materialId,
              mediaType: '12',
              digest: dd.description,
              materialUrl: dd.fileUrl,
              coverUrl: dd.picUrl,
              content: dd.content,
              materialName: dd.title,
            }
            arr.push(ff)
          } else if (dd.realType === 5) {
            let obj = {
              id: dd.materialId,
              mediaType: '5',
              materialUrl: dd.fileUrl,
              materialName: dd.title,
            }
            arr.push(obj)
          }
        })
      }
      return arr
    },
    // 获取活码分组
    getCodeCategoryList() {
      getCodeCategoryList({ mediaType: 6 }).then((res) => {
        this.codeCategoryList = res.data
      })
    },
    // 选择人员变化事件
    selectedUser(users) {
      let params = {
        userIds: [],
        departmentIds: [],
      }
      const selectedUserList = users.map((d) => {
        d.userId && params.userIds.push(d.userId)
        d.id && params.departmentIds.push(d.id)
        return {
          businessId: d.userId || d.id,
          businessName: d.name,
          businessIdType: d.userId ? 2 : 1,
        }
      })
      params.userIds += ''
      params.departmentIds += ''
      // 全天排班
      if (this.codeForm.qrRuleType == 1) {
        this.codeForm.weEmpleCodeUseScops = selectedUserList
      } else {
        // 自动排班
        this.codeForm.empleCodeRosterDto[this.selectedRosterIndex].weEmpleCodeUseScops = selectedUserList
        this.checkStartEnd(null, this.selectedRosterIndex)
      }
    },
    // 自动排班-选择员工
    onSelectUser(index) {
      // 设置回显数据
      this.selectedUserList = []
      if (this.codeForm.qrRuleType == 2) {
        this.selectedRosterIndex = index
        let arr = []
        arr = this.codeForm.empleCodeRosterDto[this.selectedRosterIndex].weEmpleCodeUseScops.map((dd) => {
          return {
            userId: dd.businessId,
            // id: dd.businessIdType === 1 ? dd.businessId:'',
            name: dd.businessName,
          }
        })
        this.selectedUserList = arr
        // this.selectedUserList = [...this.codeForm.weEmpleCodeUseScops[index]]
      } else {
        // this.selectedUserList = [...this.codeForm.weEmpleCodeUseScops]
        let arr = []
        arr = this.codeForm.weEmpleCodeUseScops.map((dd) => {
          return {
            userId: dd.businessId,
            // id: dd.businessIdType === 1 ? dd.businessId:'',
            name: dd.businessName,
          }
        })
        this.selectedUserList = arr
      }
      this.dialogVisibleSelectUser = true
    },
    // 添加工作周期
    onAddRoster() {
      this.codeForm.empleCodeRosterDto.push({
        weEmpleCodeUseScops: [], // 员工
        weekday: [], // 周期
        type: 1,
        startDate: '', // 开始时间
        endDate: '', // 结束时间
      })
    },
    // 删除工作周期
    onRemoveRoster(index) {
      this.codeForm.empleCodeRosterDto.splice(index, 1)
    },
    // 工作周期时间变化
    onRosterTimeChange(e, index) {
      const [startTime, endTime] = e
      this.codeForm.empleCodeRosterDto[index].startDate = startTime
      this.codeForm.empleCodeRosterDto[index].endDate = endTime
      this.codeForm.empleCodeRosterDto[index].time = e
    },
    selectedFn() {
      if (this.baseForm.weEmpleCodeTags) {
        this.selectedTagList = this.baseForm.weEmpleCodeTags.map((dd) => ({
          tagId: dd.tagId,
          name: dd.tagName,
        }))
      }
      this.dialogVisibleSelectTag = true
    },
    submitSelectTag(data) {
      this.baseForm.weEmpleCodeTags = data.map((d) => ({
        tagId: d.tagId,
        tagName: d.name,
      }))
    },
    resetData(list) {
      let arr = []
      if (list && list.length) {
        list.forEach((dd) => {
          if (dd.msgType === '0') {
            let obj = {
              msgType: 'image',
              picUrl: dd.materialUrl,
            }
            arr.push(obj)
          } else if (dd.msgType === '8') {
            let ob = {
              msgType: 'link',
              title: dd.materialName,
              linkUrl: dd.materialUrl,
            }
            arr.push(ob)
          } else if (dd.msgType === '9') {
            let ff = {
              msgType: 'miniprogram',
              appId: dd.digest,
              title: dd.materialName,
              picUrl: dd.coverUrl,
              linkUrl: dd.materialUrl,
            }
            arr.push(ff)
          }
        })
      }
      return arr
    },
    submit(data) {
      this.loading = true
      let list = data.attachments
      let myObj = {
        attachments: [
          {
            content: data.templateInfo,
            msgType: 'text',
          },
        ],
      }
      myObj.attachments.push(...list)
      if (this.codeForm.qrRuleType === 1) {
        let obj = {
          type: 0,
          scopeId: this.codeForm.weEmpleCodeUseScops[0].scopeId ? this.codeForm.weEmpleCodeUseScops[0].scopeId : '',
          userIds: this.codeForm.weEmpleCodeUseScops.map((dd) => dd.businessId),
        }
        this.codeForm.qrUserInfos = [obj]
      } else {
        this.codeForm.qrUserInfos = []
        this.codeForm.empleCodeRosterDto.forEach((fff) => {
          let obj = {
            scopeId: fff.scopeId ? fff.scopeId : '',
            type: fff.type,
            beginTime: fff.startDate,
            endTime: fff.endDate,
            userIds: fff.weEmpleCodeUseScops.map((dd) => dd.businessId),
            workCycle: fff.weekday,
          }
          this.codeForm.qrUserInfos.push(obj)
        })
      }
      this.baseForm.qrTags = this.baseForm.weEmpleCodeTags.map((ccc) => ccc.tagId)
      let obj = Object.assign({}, this.baseForm, this.codeForm, myObj)
      delete obj.weEmpleCodeTags
      delete obj.weEmpleCodeUseScops
      delete obj.empleCodeRosterDto
      if (this.formTemp.id) {
        obj.qrId = this.formTemp.id
        obj.configId = this.formTemp.configId
      }
      ;(this.formTemp.id ? update : add)(obj)
        .then(({ data }) => {
          this.msgSuccess('操作成功')
          this.loading = false
          this.$router.back()
        })
        .catch(() => {
          this.loading = false
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.sub-des {
  font-size: 12px;

  font-weight: 400;
  color: #999999;
}

.add-continue {
  cursor: pointer;
  font-size: 14px;

  font-weight: 400;
  color: var(--color);
  display: flex;
  align-items: center;
  justify-content: center;
  &:hover {
    opacity: 0.8;
  }
}

.crumb- {
  // 一级 页面标题
  &title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 90px; // line-height: 90px;
    font-size: 18px;
    font-weight: 500;
    color: #333;
    padding: 0 20px;
    background: #fff;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }
}

.crumb {
  font-size: 12px;

  font-weight: 400;
  color: #666666;
  display: flex;
}

.wrap {
  display: flex;
  margin-top: 24px;
  .el-form {
    margin-right: 10%;
  }
}

.preview-wrap {
  line-height: 26px;
}

.tip {
  color: #999;
}

.welcome-input {
  display: table;
  width: 80%;
  margin: 0 auto 20px;
}

.el-icon-error {
}

.my-cord {
  position: relative;
  .operation {
    z-index: 100;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 12px;

    font-weight: 400;
    color: #1785ff;
    display: flex;
    align-items: center;
    &:hover {
      opacity: 0.8;
    }
  }
}
.roster-btn-delete {
  margin-top: -16%;
  margin-right: -8%;
}
.roster-card:not(:first-child) {
  margin-top: 20px;
}
</style>
